<template>
<div class="system-authorization views-container">
    <div class="wlm-form">
        <div class="authorization-header">官方网站：<a class="orders-blue" target="_blank" href="https://www.weliam.com.cn">https://www.weliam.com.cn</a>，每个站点享受一年免费更新服务，更新时间到期不影响程序使用。</div>
        <div class="authorization-body">
            <div class="title">授权信息</div>
            <div class="content">
                <div class="flex-row flex-justify-b">
                    <div class="item"><span class="item-label">产品名称：</span><span>{{categoryData.name}}</span></div>
                    <div class="item"><span class="item-label">平台数量：</span><span>{{categoryData.count}}</span></div>
                    <div class="item"><span class="item-label">最新版本：</span><span>{{categoryData.version}}</span></div>
                </div>
                <div class="flex-row flex-justify-b" style="margin-top:34px;">
                    <div class="item"><span class="item-label">授权域名：</span><span>{{categoryData.siteurl}}</span></div>
                    <div class="item"><span class="item-label">授权IP：</span><span>{{categoryData.ip}}</span></div>
                    <div class="item"><span class="item-label">授权码：</span><span>{{categoryData.code}}</span></div>
                </div>
                <div class="flex-row flex-justify-b" style="margin-top:34px;">
                    <div class="item"><span class="item-label">授权状态：</span><span>{{categoryData.status}}</span></div>
                    <div class="item"><span class="item-label">更新服务截止时间：</span><span>{{categoryData.endtime}}</span></div>
                    <div class="item"><span class="item-label">站点ID：</span><span>{{categoryData.siteid}}</span></div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
  licenseInformation
} from '@/api/cloudservice'
// import mixins from '@/mixins/mixins'
export default {
  name: 'SystemAuthorization',
  components: {

  },
  created() {
    licenseInformation().then((response) => {
      const {
        data: {
          data: msgData = []
        }
      } = response
      this.categoryData = msgData
    })
  },
  data() {
    return {
      categoryData: [],
      formFormatData: {
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.system-authorization {
    font-size: 14px;

    .authorization-header {
        padding: 20px 16px;
        background: rgb(255, 247, 204);
        border: 1px solid rgb(255, 238, 187);
        margin: 20px;
        border-radius: 4px;
    }

    .authorization-body {
        margin: 20px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        overflow: hidden;

        .title {
            padding: 20px 16px;
            background: #409EFF;
            color: #ffffff;
        }

        .content {
            background: rgb(247, 250, 255);
            padding: 40px 50px;
            .item{
              width: 33%;
            }
            .item-label {
                font-weight: 600;
            }
        }
    }
}
</style>
